<template>
    <div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="生成数量">
                <el-input-number v-model="number"></el-input-number>
            </el-form-item>
            <el-form-item label="大写">
                <el-switch v-model="upper"></el-switch>
            </el-form-item>
            <el-form-item label="包含横线">
                <el-switch v-model="line"></el-switch>
            </el-form-item>
            <el-form-item label="有序">
                <el-switch v-model="order"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="success" round @click="generate">生 成</el-button>
                <!--<el-button type="info" round @click="copy">复 制</el-button>-->
            </el-form-item>
        </el-form>
        <button id="copy" data-clipboard-target="#result" style="display: none"></button>
        <div id="result" v-for="item in result">
            {{item}}

        </div>
    </div>
</template>
<script setup>
    import {ref, reactive} from 'vue'

    const number = ref(5)
    const upper = ref(true)
    const line = ref(false)
    const order = ref(true)
    const result = reactive([])

    const generateUUID = function () {
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
            d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }
    const generate = function () {
        result.length = 0
        for (let i = 0; i <= number.value; i++) {
            let uuid = generateUUID()
            if (!line.value) {
                uuid = uuid.replace(/\-/g, '')
            }
            if (upper.value) {
                uuid = uuid.toUpperCase()
            }
            result.push(uuid)
        }
        if (order.value) {
            result.sort()
        }
    }
    const copy = function () {
        document.querySelector('#copy').click()
    }
</script>
<style>
</style>
